liankao/src/pages/process/kdsmjd/detail/[ykj_id]/[ykg_id].vue

<script setup>
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";
import {useRouter} from "vue-router";
const router = useRouter();
console.log(router,7)
const route = useRoute();
const linkTo = (obj) => {
  router.push(obj);
};
let type_list = $ref([{
  id:'qks',
  name:'缺考'
},{
  id:'xhycs',
  name:'学号异常'
},{
  id:'ymycs',
  name:'页码异常',
},{
  id:'qkycs',
  name:'缺考异常'
},{
  id:'kgtycs',
  name:'客观题异常'
},{
  id:'xztycs',
  name:'选择题异常'
},{
  id:'pdtycs',
  name:'判断题异常'
},{
  id:'tktycs',
  name:'填空题异常'
}])
let cur_type = $ref({
  id:'qks',
  name:'缺考'
})
let ykj_id = $ref('')
let ykg_id = $ref('')
let ykg_name = $ref('')
let limit = $ref(10);
let total = $ref(0);
let cur_page = $ref(1);
let listData = $ref([]);
let fullscreenLoading = $ref(false);
function switchType(item) {
  cur_type = item;
  cur_page = 1;
  getListData();
}
function getListData() {
  fullscreenLoading = true;
  let data = {
    page: cur_page,
    ykg_id:ykg_id,
    limit: limit,
    tab:cur_type.id
  };
  request({
    url: "/yzy/scan/kd_detail",
    data: data,
  }).then((res) => {
    fullscreenLoading = false;
    if (res.code === '1') {
      ykg_name = res.data.kc_info.ykg_name;
      listData = res.data.page_data;
      total = Number(res.data.total_rows);
      cur_page = Number(res.data.page_now);
    }
  })
}
const handleSelectionChange = (val) => {
  cur_page = val;
  getListData();
};
if (route.params.ykg_id) {
  ykg_id = route.params.ykg_id;
  ykj_id = route.params.ykj_id;
  getListData();
}
</script>
<route lang="json">
{
"meta":{
"title":"考点扫描进度详情",
"breadcrumb":true
}
}
</route>
<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo({name:'process-kdsmjd-ykj_id',params:{ykj_id:ykj_id}})">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
      <h3 class="mb-45px text-18px text-center">{{ykg_name}}</h3>
      <ul class="type-list">
        <li v-for="item in type_list" :class="item.id === cur_type.id?'selected':''" @click="switchType(item)">
          {{item.name}}
          <span></span>
        </li>
      </ul>
      <div v-if="listData.length > 0">
        <ul class="mt-10px stu-list min-h-400px">
          <li v-for="item in listData">
            <h3 class="text-16px">{{item.sm_name}}</h3>
            <h3 class="text-16px mt-8px">{{item.ykg_name}}</h3>
            <h3 class="text-16px mt-8px">{{item.student_no}}&nbsp;&nbsp;{{item.user_realname}}</h3>
          </li>
        </ul>
        <div class="mt-20px page-new flex justify-end">
          <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next"
                         :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
        </div>
      </div>
      <div v-else class="no-data">
        <div>
          <h3 class="no-data-img"></h3>
          <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$color: #0048e5;
::v-deep .el-pagination.is-background .btn-next.is-active,
::v-deep .el-pagination.is-background .btn-prev.is-active,
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: $color;
}
.type-list{
  width: 100%;
  border-bottom: 1px solid #D4E1FF;
  display: flex;
  align-items: center;
  padding-left: 10px;
  li{
    position: relative;
    width: 100px;
    font-size: 16px;
    color: #595959;
    padding-bottom: 15px;
    text-align: center;
    cursor: pointer;
    &+li{
      margin-left: 25px;
    }
    &.selected{
      font-size: 18px;
      color: #0148E5;
      span{
        display: block;
      }
    }
    span{
      display: none;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 4px;
      background: #0148e5;
      border-radius: 2px;
    }
  }
}
.stu-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items:flex-start;
  li{
    width: 237px;
    height: auto;
    background: #f1f7ff;
    border-radius: 40px;
    margin: 35px 0 0 35px;
    padding: 20px 0;
    text-align: center;
  }
}
.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
</style>